<template>
  <div>
    <a-modal 
      v-model="visible" 
      title="请输入导出数量（单次最高100条）" 
      ok-text="导出" 
      cancel-text="取消" 
      @ok="hideModal"
      :confirmLoading="confirmLoading"
    >
      <a-row :gutter="24">
        <a-col :xl="12" :lg="12" :md="12" :sm="24">
          <a-input-number
            style="width: 100%"
            :default-value="1"
            :min="1"
            placeholder="请输入页数"
            :formatter="value => `${value}页`"
            :parser="value => value.replace('页', '')"
            v-model="pageNo"
          />
        </a-col>
        <a-col :xl="12" :lg="12" :md="12" :sm="24">
          <a-input-number
            style="width: 100%"
            :default-value="100"
            :max="100"
            placeholder="最高100"
            :formatter="value => `${value}条`"
            :parser="value => value.replace('条', '')"
            disabled
          />
        </a-col>
        <a-col :xl="12" :lg="12" :md="12" :sm="24" style="margin-top:20px">
          <a-statistic title="数据导出总量占比" :value="(pageNo-1)*100+'-'+pageNo*100" class="demo-class">
            <template #suffix>
              <span> / {{num}}</span>
            </template>
          </a-statistic>
        </a-col>
      </a-row>  
    </a-modal>
  </div>
</template>
<script>
  import { getAction } from '@/api/manage'
  export default {
    props:['orderType','orderId'],
    data () {
      return {
        visible:false,
        pageNo:1,
        pageSize:100,
        num:'',
        listUrl:'',
        confirmLoading:false,
        otherParams:{},
      }
    },
    methods:{
      //弹出对话框
      modalShow(data){
        this.visible = true;
        this.num = data.num
        this.listUrl = data.listUrl;
        this.otherParams = data.params
      },

      //隐藏对话框
      hideModal(){
        this.confirmLoading = true;
        let params = {
          ...this.otherParams,
          pageNo: this.pageNo,
          pageSize:100
        }
        getAction(this.listUrl, params).then((res) => {
          this.visible = false;
          let data = res;
          this.$emit("excel",data)
        }).finally(() => {
          this.confirmLoading = false;
        })
      },
    }
  }
</script>
<style scoped>
</style>